chore(docs): Next tranche of UI/UX refinements#2170
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
2 Skipped Deployments
|
|
|
Warning Rate limit exceeded
You’ve run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughThis PR tweaks UI styling: refines the ENSNode service card hover/transition, replaces plain back links with iconified styled anchors on two example pages, and updates Starlight sidebar CSS for docked peek width, collapsed-state visibility, and expanded/hover interactions. ChangesUI Styling and Layout Updates
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Pull request overview
This PR updates the ensnode.io docs site styling and a few doc pages to refine sidebar behavior and improve link/card hover UX.
Changes:
- Adjust docked sidebar behavior (wider “peek” strip + icon-only collapsed view) and unify hover/expanded styling for sidebar items.
- Upgrade “Back to … overview” links in the enssdk/enskit interactive example pages to a richer icon + hover treatment.
- Strengthen hover styling for
ENSNodeServiceCard.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| docs/ensnode.io/src/styles/starlight.css | Refines docked sidebar + sidebar hover/expanded styling for better discoverability and consistency. |
| docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enssdk/example.mdx | Replaces the plain “Back to …” link with an icon-enhanced link UI. |
| docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enskit/example.mdx | Replaces the plain “Back to …” link with an icon-enhanced link UI. |
| docs/ensnode.io/src/components/atoms/ENSNodeServiceCard.astro | Updates hover border/shadow and chevron hover color for stronger card affordance. |
Comments suppressed due to low confidence (1)
docs/ensnode.io/src/styles/starlight.css:103
nav.sidebarisposition: fixedbut no longer setsinset-inline-start: 0(or an equivalentleft: 0). On wide layouts where.pageis centered (margin-inline: auto),inset-inline-start:autowill anchor the fixed sidebar to its static (centered) position rather than the viewport edge, which can break the intended “docked peek strip” behavior. Consider restoringinset-inline-start: 0(orinset-inline: 0 auto) so the docked sidebar reliably pins to the viewport’s inline start.
.page[data-sidebar-docked] nav.sidebar {
position: fixed;
inset-block: var(--sl-nav-height) 0;
z-index: var(--sl-z-index-menu);
width: var(--sl-sidebar-docked-peek);
overflow: hidden;
transition: width 0.2s ease;
background-color: var(--sl-color-bg-sidebar);
border-inline-end: 1px solid var(--sl-color-hairline-shade);
}
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In
`@docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enskit/example.mdx`:
- Line 31: The hover color currently sets the Icon component's color to white
via the class fragment group-hover:text-[var(--sl-color-white)], which can make
the arrow invisible on light backgrounds; update the Icon's class (the Icon
element with the class string containing
"group-hover:text-[var(--sl-color-white)]") to use an accessible accent or text
token on hover instead (for example replace
group-hover:text-[var(--sl-color-white)] with a token such as
group-hover:text-[var(--sl-color-accent)] or another semantically named text
token) so the arrow remains visible without changing the link background.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: abcfdb0b-fc47-4345-afb4-8a8ea6de1a67
📒 Files selected for processing (4)
docs/ensnode.io/src/components/atoms/ENSNodeServiceCard.astrodocs/ensnode.io/src/content/docs/docs/integrate/integration-options/enskit/example.mdxdocs/ensnode.io/src/content/docs/docs/integrate/integration-options/enssdk/example.mdxdocs/ensnode.io/src/styles/starlight.css
![vercel[bot]](https://avatars.githubusercontent.com/in/8329?s=60&v=4){kind=small}
Greptile SummaryThis PR refines several UI/UX elements in the ensnode.io docs site: the docked sidebar is made more discoverable by exposing topic icons when collapsed, hover states for sidebar expandable items and
Confidence Score: 5/5Pure CSS and MDX documentation changes with no logic, data, or API surface affected — safe to merge. All changes are scoped to visual presentation: CSS hover/transition rules, a sidebar layout tweak, and styled navigation links. No application logic, data handling, or build configuration is touched. The author confirmed local and Vercel preview testing. No files require special attention. Important Files Changed
Flowchart%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[Page Load - Desktop ≥50rem] --> B{data-sidebar-docked?}
B -- No --> C[Normal sidebar - always visible]
B -- Yes --> D{sidebar :hover or :focus-within?}
D -- Yes --> E[Expand to full width\nAll sidebar content visible]
D -- No --> F[Collapsed: 4rem peek\nShow only topic icons\nHide topic labels + nested content\nClear current-topic highlight]
E --> G[User navigates or moves away]
G --> D
Reviews (8): Last reviewed commit: "Apply ai assistant's suggestions, pt.4 -..." | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| <a href={href} class="not-content group w-full h-fit min-h-[100px] flex flex-row justify-between items-center gap-5 border border-gray-200 hover:border-[#4a5c63] hover:shadow cursor-pointer rounded-2xl overflow-hidden p-4 transition-all duration-200"> | ||
| <div class="w-fit flex flex-row justify-start items-center gap-5"> | ||
| <slot name="icon"/> | ||
| <div class="not-content w-full h-fit flex flex-col justify-start items-start gap-2"> | ||
| <h4 class="not-content text-2xl leading-normal font-semibold text-black">{title}</h4> | ||
| <p class="not-content text-base leading-normal text-[var(--sl-color-text)]">{description}</p> | ||
| </div> | ||
| </div> | ||
| <Icon name="lucide:chevron-right" class="not-content h-10 w-10 shrink-0 text-gray-200 group-hover:text-gray-300" /> | ||
| <Icon name="lucide:chevron-right" class="not-content h-10 w-10 shrink-0 text-gray-200 group-hover:text-[#4a5c63]" /> |
There was a problem hiding this comment.
#4a5c63 is hardcoded in two places on this element. This value won't respond to Tailwind theme changes or dark/light mode switching, and it silently diverges from the design-token system already used elsewhere (e.g. var(--sl-color-text)). The closest existing token—var(--sl-color-accent)—gives the same teal-ish look while staying theme-aware.
| <a href={href} class="not-content group w-full h-fit min-h-[100px] flex flex-row justify-between items-center gap-5 border border-gray-200 hover:border-[#4a5c63] hover:shadow cursor-pointer rounded-2xl overflow-hidden p-4 transition-all duration-200"> | |
| <div class="w-fit flex flex-row justify-start items-center gap-5"> | |
| <slot name="icon"/> | |
| <div class="not-content w-full h-fit flex flex-col justify-start items-start gap-2"> | |
| <h4 class="not-content text-2xl leading-normal font-semibold text-black">{title}</h4> | |
| <p class="not-content text-base leading-normal text-[var(--sl-color-text)]">{description}</p> | |
| </div> | |
| </div> | |
| <Icon name="lucide:chevron-right" class="not-content h-10 w-10 shrink-0 text-gray-200 group-hover:text-gray-300" /> | |
| <Icon name="lucide:chevron-right" class="not-content h-10 w-10 shrink-0 text-gray-200 group-hover:text-[#4a5c63]" /> | |
| <a href={href} class="not-content group w-full h-fit min-h-[100px] flex flex-row justify-between items-center gap-5 border border-gray-200 hover:border-[var(--sl-color-accent)] hover:shadow cursor-pointer rounded-2xl overflow-hidden p-4 transition-all duration-200"> | |
| <div class="w-fit flex flex-row justify-start items-center gap-5"> | |
| <slot name="icon"/> | |
| <div class="not-content w-full h-fit flex flex-col justify-start items-start gap-2"> | |
| <h4 class="not-content text-2xl leading-normal font-semibold text-black">{title}</h4> | |
| <p class="not-content text-base leading-normal text-[var(--sl-color-text)]">{description}</p> | |
| </div> | |
| </div> | |
| <Icon name="lucide:chevron-right" class="not-content h-10 w-10 shrink-0 text-gray-200 group-hover:text-[var(--sl-color-accent)]" /> |
There was a problem hiding this comment.
- We only support light mode, so theme changes are not a concern
- The color was chosen to match the hover colors of the search component
|
|
||
| [Back to enskit overview](/docs/integrate/integration-options/enskit) | ||
| <a class="group w-fit flex flex-row justify-start items-center gap-2 mt-4" href="/docs/integrate/integration-options/enskit"> | ||
| <Icon name="left-arrow" class="h-5 w-5 text-[var(--sl-color-accent)] group-hover:text-[var(--sl-color-white)] transition-colors duration-200" /> |
There was a problem hiding this comment.
--sl-color-white. In this project --sl-color-white is mapped to var(--color-surface), which in light mode is a very light (near-white) value — the same family of colour as the page background. The icon would effectively disappear on hover in light mode. Using --sl-color-accent-high preserves visibility in both themes. The same issue exists in the enssdk example.
| <Icon name="left-arrow" class="h-5 w-5 text-[var(--sl-color-accent)] group-hover:text-[var(--sl-color-white)] transition-colors duration-200" /> | |
| <Icon name="left-arrow" class="h-5 w-5 text-[var(--sl-color-accent)] group-hover:text-[var(--sl-color-accent-high)] transition-colors duration-200" /> |
There was a problem hiding this comment.
- In our current setup,
--sl-color-whiteis a near black color, so the visibility is not an issue. - Additionally, that color matches the hover styles of the text-body links that we want to mimic there
There was a problem hiding this comment.
You're right — I can see in starlight.css that --sl-color-white is remapped to var(--color-surface), and that same token is used consistently throughout the stylesheet for hover states (sidebar items, pagination arrows, heading links, etc.). My concern was based on the standard Starlight convention where --sl-color-white is literally white, but your theme inverts that mapping intentionally. The usage here is consistent with the rest of the design system. My comment was incorrect.
Tip: You can give me more context with [.greptile/rules.md](https://www.greptile.com/docs/code-review/custom-standards) so I get this right next time.
|
|
||
| [Back to enssdk overview](/docs/integrate/integration-options/enssdk) | ||
| <a class="group w-fit flex flex-row justify-start items-center gap-2 mt-4" href="/docs/integrate/integration-options/enssdk"> | ||
| <Icon name="left-arrow" class="h-5 w-5 text-[var(--sl-color-accent)] group-hover:text-[var(--sl-color-white)] transition-colors duration-200" /> |
There was a problem hiding this comment.
--sl-color-white resolves to a near-white surface colour, making the icon invisible on hover against the light page background.
| <Icon name="left-arrow" class="h-5 w-5 text-[var(--sl-color-accent)] group-hover:text-[var(--sl-color-white)] transition-colors duration-200" /> | |
| <Icon name="left-arrow" class="h-5 w-5 text-[var(--sl-color-accent)] group-hover:text-[var(--sl-color-accent-high)] transition-colors duration-200" /> |
There was a problem hiding this comment.
- In our current setup,
--sl-color-whiteis a near black color, so the visibility is not an issue. - Additionally, that color matches the hover styles of the text-body links that we want to mimic there
…/chore/docs-uiux-refinements-pt3
…/chore/docs-uiux-refinements-pt3
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@docs/ensnode.io/src/styles/starlight.css`:
- Around line 325-333: The nested CSS rule for selector "`#starlight__sidebar`
details details > summary:hover" contains two conflicting color declarations;
remove the redundant "color: var(--sl-color-gray-2);" so only "color:
var(--sl-color-white);" (and the inner span color) remains to avoid dead code
and confusion.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 714afbb5-1305-4bc6-818e-4ff041a956b5
📒 Files selected for processing (1)
docs/ensnode.io/src/styles/starlight.css
Lite PR → Next tranche of UI/UX refinements
Summary
ENSNodeServiceCard (atdocs/services`)back to (enssdk/enskit) overviewlinksWhy
Testing
typecheck,lint, andtestcommands locally to ensure that the migration didn't break anything, and later confirmed that in our CI workflowNotes for Reviewer (Optional)
Customization of sidebar topics icons
Pre-Review Checklist (Blocking)